<html>
<head>
  <script type="module">
    import { store } from "/components/sidebar/tasks/tasks-store.js";
  </script>
</head>
<body>
  <div class="tasks-list-root">
    <template x-if="$store.tasks">
      <div x-data class="tasks-list-inner">
        <h3 class="section-header section-header-collapsible" 
            data-bs-toggle="collapse"
            @click="$store.sidebar.toggleSection('tasks')"
            x-effect="!$store.sidebar.isSectionOpen('tasks') ? $el.classList.add('collapsed') : $el.classList.remove('collapsed')">
          Tasks
          <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
            <path d="M8 4l8 8-8 8" />
          </svg>
        </h3>
        <div class="collapse" id="tasks-collapse"
             x-effect="(() => { const c = bootstrap.Collapse.getOrCreateInstance($el, { toggle: false }); $store.sidebar.isSectionOpen('tasks') ? c.show() : c.hide(); })()">
          <div class="tasks-list-body">
          <div class="tasks-list-container" x-data>
            <ul class="config-list tasks-config-list" x-show="$store.tasks.tasks.length > 0">
              <template x-for="task in $store.tasks.tasks" :key="task.id">
                <li>
                  <div class="task-container" :class="{'task-selected': task.id === $store.tasks.selected}">
                    <div class="chat-list-button" @click="$store.tasks.selectTask(task.id)">
                      <div class="task-container-vertical">
                        <div class="task-title-line">
                          <span class="project-color-ball" :style="task.project?.color ? { backgroundColor: task.project.color } : { border: '1px solid var(--color-border)' }"></span>
                          <span class="task-name"
                            :title="(task.task_name || `Task #${task.no}`)"
                            x-text="(task.task_name || `Task #${task.no}`)"
                            :data-task-id="task.id"></span>
                        </div>
                      <div class="task-info-line">
                        <span class="scheduler-status-badge scheduler-status-badge-small"
                              :class="task.state ? `scheduler-status-${task.state}` : 'scheduler-status-idle'"
                              x-text="task.state || 'idle'"></span>
                        <button class="edit-button"
                                @click.stop="$store.tasks.openDetail(task.id)"
                                title="View task details" style="margin-left: auto; margin-right: 5px;">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="var(--color-primary)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M256 0c70.69 0 134.69 28.66 181.02 74.98C483.34 121.3 512 185.31 512 256c0 70.69-28.66 134.7-74.98 181.02C390.69 483.34 326.69 512 256 512c-70.69 0-134.69-28.66-181.02-74.98C28.66 390.69 0 326.69 0 256c0-70.69 28.66-134.69 74.98-181.02C121.31 28.66 185.31 0 256 0zm-9.96 161.03c0-4.28.76-8.26 2.27-11.91 1.5-3.63 3.77-6.94 6.79-9.91 3-2.95 6.29-5.2 9.84-6.7 3.57-1.5 7.41-2.28 11.52-2.28 4.12 0 7.96.78 11.49 2.27 3.54 1.51 6.78 3.76 9.75 6.73 2.95 2.97 5.16 6.26 6.64 9.91 1.49 3.63 2.22 7.61 2.22 11.89 0 4.17-.73 8.08-2.21 11.69-1.48 3.6-3.68 6.94-6.65 9.97-2.94 3.03-6.18 5.32-9.72 6.84-3.54 1.51-7.38 2.29-11.52 2.29-4.22 0-8.14-.76-11.75-2.26-3.58-1.51-6.86-3.79-9.83-6.79-2.94-3.02-5.16-6.34-6.63-9.97-1.48-3.62-2.21-7.54-2.21-11.77zm13.4 178.16c-1.11 3.97-3.35 11.76 3.3 11.76 1.44 0 3.27-.81 5.46-2.4 2.37-1.71 5.09-4.31 8.13-7.75 3.09-3.5 6.32-7.65 9.67-12.42 3.33-4.76 6.84-10.22 10.49-16.31.37-.65 1.23-.87 1.89-.48l12.36 9.18c.6.43.73 1.25.35 1.86-5.69 9.88-11.44 18.51-17.26 25.88-5.85 7.41-11.79 13.57-17.8 18.43l-.1.06c-6.02 4.88-12.19 8.55-18.51 11.01-17.58 6.81-45.36 5.7-53.32-14.83-5.02-12.96-.9-27.69 3.06-40.37l19.96-60.44c1.28-4.58 2.89-9.62 3.47-14.33.97-7.87-2.49-12.96-11.06-12.96h-17.45c-.76 0-1.38-.62-1.38-1.38l.08-.48 4.58-16.68c.16-.62.73-1.04 1.35-1.02l89.12-2.79c.76-.03 1.41.57 1.44 1.33l-.07.43-37.76 124.7zm158.3-244.93c-41.39-41.39-98.58-67-161.74-67-63.16 0-120.35 25.61-161.74 67-41.39 41.39-67 98.58-67 161.74 0 63.16 25.61 120.35 67 161.74 41.39 41.39 98.58 67 161.74 67 63.16 0 120.35-25.61 161.74-67 41.39-41.39 67-98.58 67-161.74 0-63.16-25.61-120.35-67-161.74z"/>
                          </svg>
                        </button>
                        <button class="edit-button" title="Clear task chat"
                                @click.stop="$store.tasks.reset(task.id)" style="margin-right: 5px;">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 122.88 121.1" fill="var(--color-primary)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M62.89,56.03c1.11-0.35,2.34-0.25,3.72,0.37l10.4,7.87c2.26,1.71,4.24,3.78,2.73,6.9 c-0.51,1.06-1.4,2.1-2.38,3.49l-0.53,0.75c-1.97,2.8-2.61,2-5.71,1.83c0.56,13.37,1.75,27.82-2.64,40.88 c-0.87,2.7-3.32,3.44-6.95,2.71l-6.1-2.03c4.11-6.14,6.16-13.85,6.44-22.89c-3.46,8.58-6.8,16.96-10.68,20.86l-6.28-2.08 c0.61-3.05,1.05-5.43,0.35-6.9l-4.07,4.24l-9.33-5.77c6.36-3.36,11.62-7.87,15.6-13.73c-6.69,5.01-12.76,8.1-18.14,8.99 c-2.75,0.83-4.49,0.35-5.16-1.53c-0.48-1.34-0.05-1.77,0.81-2.86c1.11-1.41,2.61-2.67,4.35-3.79c-3.13,1.1-4.64,0.95-6.37,1.51 c-4.9,1.59-9.94-1.86-8.26-6.9c1.07-3.23,3.54-3.09,6.67-4.07l5.42-1.69c-5.19,0.28-10.32,0.45-15.02-0.25 c-5.4-0.8-5.31-0.99-8.24-5.38c-3.94-5.91-6.25-11.45,2.52-9.16c16.73,3.18,33.56,5.34,51.25-0.98c-0.76-1.32-0.9-2.57-0.5-3.73 C57.37,60.94,61.13,56.58,62.89,56.03L62.89,56.03z M113.8,2.42L74.45,51.53c-4.71,6.68,3.2,11.91,8.39,5.64l39.2-49.27 C125.12,1.86,119.13-3.16,113.8,2.42L113.8,2.42z"/>
                          </svg>
                        </button>
                        <button class="edit-button" title="Delete task" @click.stop="$store.tasks.deleteTask(task.id)">X</button>
                      </div>
                      </div>
                    </div>
                  </div>
                </li>
              </template>
            </ul>
            <div class="empty-list-message" x-show="$store.tasks.tasks.length === 0">
              <p><i>No tasks to list.</i></p>
            </div>
          </div>
          </div>
        </div>
      </div>
    </template>
  </div>
    </template>
  </div>

  <style>
    /* Root wrappers provide flex context when embedded */
    .tasks-list-root,
    .tasks-list-inner {
      display: contents;
    }
    
    /* tasks-list-body is the flex container inside the collapse wrapper */
    .tasks-list-body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    .tasks-list-container .section-header {
      position: sticky;
      top: 0;
      flex-shrink: 0;
      z-index: 10;
    }

    .tasks-list-container {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }
    
    /* Scrollable tasks config list */
    .tasks-config-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
      scroll-behavior: smooth;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
      overscroll-behavior: contain; /* avoid scroll chaining */
    }
    /* Hide scrollbar for Chrome/Safari/Webkit */
    .tasks-config-list::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  
    .task-title-line {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }

    .project-color-ball {
      width: 0.6em;
      height: 0.6em;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .task-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 0; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; font-size: var(--font-size-small); margin-bottom: 2px; }
    .light-mode .task-name:hover { background-color: rgba(0,0,0,0.05); }
  
    .task-info-line { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 2px; }
  
    .task-container {
      width: 100%;
      display: flex;
      align-items: stretch;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }

    .task-container:hover { 
      background-color: var(--color-background-hover);
     }
    

    .task-container-vertical { display: flex; flex-direction: column; width: 100%; gap: 6px; }

    /* Selected task accent */
    .task-selected {
      background-color: var(--color-background-hover);
    }

    .task-selected .task-name {
      font-weight: bold;
    }
  
    /* Scheduler badges (subset used in sidebar) */
    .scheduler-status-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; text-transform: capitalize; white-space: nowrap; }
    .scheduler-status-badge-small { font-size: 10px; padding: 2px 6px; margin-right: 5px; min-width: 40px; text-align: center; }
    .scheduler-status-idle { background-color: rgba(0, 100, 0, 0.2); color: #2a9d8f; border: 1px solid rgba(42, 157, 143, 0.3); }
    .scheduler-status-running { background-color: rgba(0, 60, 120, 0.2); color: #4361ee; border: 1px solid rgba(67, 97, 238, 0.3); }
    .scheduler-status-disabled { background-color: rgba(70, 70, 70, 0.2); color: #6c757d; border: 1px solid rgba(108, 117, 125, 0.3); }
    .scheduler-status-error { background-color: rgba(120, 0, 0, 0.2); color: #e63946; border: 1px solid rgba(230, 57, 70, 0.3); }
    .light-mode .scheduler-status-idle { background-color: rgba(42, 157, 143, 0.1); color: #1a6f65; }
    .light-mode .scheduler-status-running { background-color: rgba(67, 97, 238, 0.1); color: #2540b3; }
    .light-mode .scheduler-status-disabled { background-color: rgba(108, 117, 125, 0.1); color: #495057; }
    .light-mode .scheduler-status-error { background-color: rgba(230, 57, 70, 0.1); color: #c5283d; }
  
    .empty-list-message { display: flex; justify-content: center; align-items: center; height: 100px; color: var(--color-secondary); text-align: center; opacity: 0.7; font-style: italic; }
    .light-mode .empty-list-message { color: var(--color-secondary-light); }
  </style>
</body>
</html>
